<?php include THEMES_PATH.'public/before_body2.phtml'; ?>
<link href="<?php echo TPL_PATH;?>special/package/css/style.css" rel="stylesheet">
</head>
<body>
<?php include THEMES_PATH.'public/header2.phtml'; ?>
<div class="list js-list">
  <i class="icon-expand js-expand"></i>
  <ul>
    <li class="active">
      <img src="<?php echo TPL_PATH; ?>special/package/images/1.png" alt="image 1">
      <span></span>
      <p><?php echo L('package_img_title_1_desc')?></p>
    </li>
    <li class="divider">
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i class="dot"></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </li>
    <li>
      <img src="<?php echo TPL_PATH; ?>special/package/images/2.png" alt="image 2">
      <span></span>
      <p><?php echo L('package_img_title_2_desc')?></p>
    </li>
    <li class="divider">
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i class="dot"></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </li>
    <li>
      <img src="<?php echo TPL_PATH; ?>special/package/images/3.png" alt="image 3" />
      <span></span>
      <p><?php echo L('package_img_title_3_desc')?></p>
    </li>
    <li class="divider">
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i class="dot"></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </li>
    <li>
      <img src="<?php echo TPL_PATH; ?>special/package/images/4.png" alt="image 4" />
      <span></span>
      <p><?php echo L('package_img_title_4_desc')?></p>
    </li>
  </ul>
  <i class="close js-close">×</i>
</div>
<div class="wrap banner">
  <img src="<?php echo TPL_PATH; ?>special/package/images/banner1.jpg" alt="banner image" />
</div>
<?php foreach($productList as $k=>$v):?>
<?php if($k == 4):?>
<div class="wrap banner">
  <img src="<?php echo TPL_PATH; ?>special/package/images/banner2.jpg" alt="banner image" />
</div>
<?php endif;?>
<dl class="wrap package">
  <dt>
    <strong><?php echo L('package_'.$k.'_title')?></strong>
    <p><?php echo L('package_'.$k.'_desc')?></p>
  </dt>
  <dd>
    <a href="<?php echo $v['suit_id']['url']?>" target="_blank">
        <img class="" alt="<?php echo $v['suit_id']['name']?>" data-original="<?php echo $v['suit_id']['goods_img'] ? $v['suit_id']['goods_img'] : $v['suit_id']['list_img']?>" src="<?php echo $v['suit_id']['goods_img'] ? $v['suit_id']['goods_img'] : $v['suit_id']['list_img']?>">
        <img class="hide" data-original="<?php echo $v['suit_id']['ml_img']?>" src="<?php echo $v['suit_id']['ml_img']?>">
    </a>
    <p><a href="<?php echo $v['suit_id']['url']?>" target="_blank"><?php echo $v['suit_id']['name']?></a></p>
    <p><?php echo currency($v['suit_id']['advanced_price'])?></p>
    <a href="<?php echo $v['suit_id']['url']?>" class="btn btn-middle" target="_blank"><?php echo L('_DO_IT_NOW_1');?></a>
  </dd>
  <dd class="sign">
    <img src="<?php echo TPL_PATH; ?>special/package/images/plus.png" alt="plus sign" />
  </dd>
  <dd>
    <a href="<?php echo $v['shirt_id']['url']?>" target="_blank">
        <img class="" alt="<?php echo $v['shirt_id']['name']?>" data-original="<?php echo $v['shirt_id']['goods_img'] ? $v['shirt_id']['goods_img'] : $v['shirt_id']['list_img']?>" src="<?php echo $v['shirt_id']['goods_img'] ? $v['shirt_id']['goods_img'] : $v['shirt_id']['list_img']?>">
        <img class="hide" data-original="<?php echo $v['shirt_id']['ml_img']?>" src="<?php echo $v['shirt_id']['ml_img']?>">
    </a>
    <p><a href="<?php echo $v['shirt_id']['url']?>" target="_blank"><?php echo $v['shirt_id']['name']?></a></p>
    <p><?php echo currency($v['shirt_id']['advanced_price'])?></p>
    <a href="<?php echo $v['shirt_id']['url']?>" class="btn btn-middle" target="_blank"><?php echo L('_DO_IT_NOW_1');?></a>
  </dd>
  <dd class="sign">
    <img src="<?php echo TPL_PATH; ?>special/package/images/plus.png" alt="plus sign" />
  </dd>
  <dd>
      <a href="<?php echo $v['accessories_id']['url']?>" target="_blank">
        <img class="" alt="<?php echo $v['accessories_id']['name']?>" data-original="<?php echo $v['accessories_id']['goods_img'] ? $v['accessories_id']['goods_img'] : $v['shirt_id']['list_img']?>" src="<?php echo $v['accessories_id']['goods_img'] ? $v['accessories_id']['goods_img'] : $v['accessories_id']['list_img']?>">
    </a>
    <p><a href="<?php echo $v['accessories_id']['url']?>" target="_blank"><?php echo $v['accessories_id']['name']?></a></p>
    <p><?php echo currency($v['accessories_id']['custom_price'])?></p>
    <a href="<?php echo $v['accessories_id']['url']?>" class="btn btn-middle" target="_blank"><?php echo L('_DO_IT_NOW_1');?></a>
  </dd>
  <dd class="sign equal">
    <img src="<?php echo TPL_PATH; ?>special/package/images/equal.png" alt="equal sign" />
  </dd>
  <dd class="result">
    <p>
      <?php $amount  = $v['suit_id']['advanced_price']+$v['shirt_id']['advanced_price']+$v['accessories_id']['custom_price']; echo currency($amount); ?>
      <img src="<?php echo TPL_PATH; ?>special/package/images/strickout.png" alt="equals sign" />
    </p>
    <p><?php echo currency($amount*0.8);?></p>
    <span><?php echo L('package_coupon')?>: <?php echo 'BUNDLE'.$k?></span>
  </dd>
</dl>
<?php endforeach;?>

<?php include THEMES_PATH.'public/footer2.phtml'; ?>
<script>
$(function() {
	var mouseoverEvent = unifyMobileDesktop.compatibleEvent({
			mobile: 'touchend',
			desktop: 'mouseover'
		}),
		mouseoutEvent = unifyMobileDesktop.compatibleEvent({
				mobile: 'touchend',
			desktop: 'mouseout'
		}),
		clickEvent = unifyMobileDesktop.compatibleEvent({
			mobile: 'touchend',
			desktop: 'click'
		});
	
	(function() {
		var $item = $('.js-list').find('li'),
			count = $item.length,
			index = 0,
			timer = null,
			switchShow = function(currentIndex) {
				$item.eq(currentIndex).addClass('active').siblings().removeClass('active');
			},
			autoSwitch = function() {
				timer = setTimeout(function() {
					if (index < count - 1) {
						index += 2;
					} else {
						index = 0;
					}
					switchShow(index);
					timer = setTimeout(arguments.callee, 3000);
				}, 3000);
			};
		$item.not('.divider').on(mouseoverEvent, function() {
			if (timer) {
				clearTimeout(timer);
			}
			index = $(this).index();
			switchShow(index);
		}).on(mouseoutEvent, function() {
			autoSwitch();
		});
		autoSwitch();
	})();
	
	(function() {
		var $list = $('.js-list'),
			$expand = $list.find('.js-expand'),
			$close = $list.find('.js-close');
		$close.on(clickEvent, function() {
			var $this = $(this);
			$list.find('> ul').slideUp(function() {
				$this.hide();
				$expand.css('opacity', 1);
			});
		});
		$expand.on(clickEvent, function() {
			$(this).css('opacity', 0);
			$list.find('> ul').slideDown(function() {
				$close.show();
			});
		});
	})();
});

if(!unifyMobileDesktop.isSupportTouch()) {
  $('dl').on('mouseover', 'dd', function() {
    var $img = $(this).children(':first').find('img');
    $img.removeAttr('style');
    if ($img.length > 1) {
      $img.eq(0).addClass('hide').next().removeClass('hide');
    }
  }).on('mouseout', 'dd', function() {
    var $img = $(this).children(':first').find('img');
    if ($img.length > 1) {
      $img.eq(0).removeClass('hide').next().addClass('hide');
    }
  });
}

</script>

<?php include THEMES_PATH.'public/after_body.phtml'; ?>